<template>
    <div class="mvList">
        <main>
            <div class="mvsList-box w">
                <div class="changMvType">
                    <div class="areaType">
                        <ul>
                            <li
                                :class="
                                    currentType.area == '全部'
                                        ? 'selectedType'
                                        : ''
                                "
                                @click="myChangeCurrentarea('全部')"
                            >
                                全部
                            </li>
                            <li
                                :class="
                                    currentType.area == '内地'
                                        ? 'selectedType'
                                        : ''
                                "
                                @click="myChangeCurrentarea('内地')"
                            >
                                内地
                            </li>
                            <li
                                :class="
                                    currentType.area == '港台'
                                        ? 'selectedType'
                                        : ''
                                "
                                @click="myChangeCurrentarea('港台')"
                            >
                                港台
                            </li>
                            <li
                                :class="
                                    currentType.area == '欧美'
                                        ? 'selectedType'
                                        : ''
                                "
                                @click="myChangeCurrentarea('欧美')"
                            >
                                欧美
                            </li>
                            <li
                                :class="
                                    currentType.area == '日本'
                                        ? 'selectedType'
                                        : ''
                                "
                                @click="myChangeCurrentarea('日本')"
                            >
                                日本
                            </li>
                            <li
                                :class="
                                    currentType.area == '韩国'
                                        ? 'selectedType'
                                        : ''
                                "
                                @click="myChangeCurrentarea('韩国')"
                            >
                                韩国
                            </li>
                        </ul>
                    </div>
                    <div class="chupingType">
                        <ul>
                            <li
                                :class="
                                    currentType.type == '全部'
                                        ? 'selectedType'
                                        : ''
                                "
                                @click="myChangeCurrentType('全部')"
                            >
                                全部
                            </li>
                            <li
                                :class="
                                    currentType.type == '官方版'
                                        ? 'selectedType'
                                        : ''
                                "
                                @click="myChangeCurrentType('官方版')"
                            >
                                官方版
                            </li>
                            <li
                                :class="
                                    currentType.type == '原生'
                                        ? 'selectedType'
                                        : ''
                                "
                                @click="myChangeCurrentType('原生')"
                            >
                                原生
                            </li>
                            <li
                                :class="
                                    currentType.type == '现场版'
                                        ? 'selectedType'
                                        : ''
                                "
                                @click="myChangeCurrentType('现场版')"
                            >
                                现场版
                            </li>
                            <li
                                :class="
                                    currentType.type == '网易出品'
                                        ? 'selectedType'
                                        : ''
                                "
                                @click="myChangeCurrentType('网易出品')"
                            >
                                网易出品
                            </li>
                        </ul>
                    </div>
                    <div class="orderType">
                        <ul>
                            <li
                                :class="
                                    currentType.order == '上升最快'
                                        ? 'selectedType'
                                        : ''
                                "
                                @click="myChangeCurrentOrder('上升最快')"
                            >
                                上升
                            </li>
                            <li
                                :class="
                                    currentType.order == '最热'
                                        ? 'selectedType'
                                        : ''
                                "
                                @click="myChangeCurrentOrder('最热')"
                            >
                                最热
                            </li>
                            <li
                                :class="
                                    currentType.order == '最新'
                                        ? 'selectedType'
                                        : ''
                                "
                                @click="myChangeCurrentOrder('最新')"
                            >
                                最新
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="mvsBox">
                    <div class="mvsItme" v-for="item in mvsList">
                        <div class="img-box" @click="jumpMvDetails(item.id)">
                            <img :src="item.cover" alt="" />
                            <div class="mvs-info">
                                <div class="artisName">
                                    {{ item.artistName }}
                                </div>
                                <div class="mvs-time">
                                    {{ formatTime(item.duration) }}
                                </div>
                            </div>
                            <div class="msv-playCount">
                                <i class="el-icon-caret-right"></i>
                                <span>{{ item.playCount }}</span>
                            </div>
                            <div class="hidden-play">
                                <div class="hidden-play">
                                    <img
                                        src="../../assets/images/btn-play.png"
                                        alt=""
                                    />
                                </div>
                            </div>
                        </div>
                        <div class="mvs-content">
                            <p>{{ item.name }}</p>
                        </div>
                    </div>
                </div>
                <div class="poll" ref="pollAllMvList">
                    <img src="../../assets/images/loading2.gif" alt="" />
                </div>
            </div>
        </main>
    </div>
</template>

<script>
import { lazyload, formatTime, debounce } from "../../utils/common";
import { createNamespacedHelpers } from "vuex";

const { mapState, mapMutations, mapActions } = createNamespacedHelpers(
    "mvsLists"
);
export default {
    data() {
        return {
            debounce,
        };
    },
    computed: {
        ...mapState(["currentType", "mvsList"]),
    },
    created() {
        this.getMvAll();
        this.mvsPrevY = 0;
        this.formatTime = formatTime;
    },
    mounted() {
        this.lazyLoading= this.debounce(this.sendAjax, 1000);
        window.addEventListener(
            "scroll",
            this.lazyLoading,
            false
        );
    },
    beforeDestroy() {
        window.removeEventListener("scroll",  this.lazyLoading);
        console.log("销毁！");
    },
    methods: {
        ...mapActions(["getMvAll"]),
        ...mapMutations([
            "changeCurrentType",
            "changeCurrentArea",
            "changeOrder",
            "changeCurrentPage",
        ]),
        myChangeCurrentOrder(val) {
            this.changeOrder(val);
            this.getMvAll();
        },
        myChangeCurrentType(val) {
            this.changeCurrentType(val);
            this.getMvAll();
        },
        myChangeCurrentarea(val) {
            this.changeCurrentArea(val);
            this.getMvAll();
        },
        sendAjax() {
            console.log("我没有被销毁哦");
            if (window.scrollY > this.mvsPrevY) {
                // lazyload(this.$refs.singerImg);
                //记录单向锁，防止向上滚动也触发事件
                this.mvsPrevY = window.scrollY;
                console.log("window", window.scrollY);
                console.log(
                    this.$refs.pollAllMvList.getBoundingClientRect().top
                );
                if (
                    //如果占位符距离顶部的距离小于窗口，就证明这个占位符出现在了用户视野里
                    //就可以发送ajax了
                    this.$refs.pollAllMvList.getBoundingClientRect().top <
                    window.innerHeight
                ) {
                    //请求下一页数据
                    this.changeCurrentPage();
                    this.getMvAll();
                    console.log("我请求下一页拉~~~~");
                }
            }
        },
        jumpMvDetails(id) {
            this.$router.push("/home/mvDetails/" + id);
        },
    },
};
</script>

<style lang='scss' scoped>
@import "../../assets/sass/mvList.scss";
</style>